<!--教师个人简介页-->
<template>
  <div class="main">
    <tr>
      <td id="title">师资队伍</td>
    </tr>
    <tr>
      <td colspan="3" class="dashed-bottom"></td>
      <!-- 使用colspan="3"让单元格跨越整行，并应用虚线样式 -->
    </tr>
<!--    <tr>-->
<!--      <td id="manage">-->
<!--        <router-link :to="currentJumpPath">管理个人资料</router-link>-->
<!--      </td>-->
<!--    </tr>-->
    <tr>
      <td>

      </td>

    </tr>
    <tr>
      <table>
        <tr>
          <td class="profile-image">
            <img v-if="teacher.personal_photo" :src="teacher.personal_photo" alt="" class="image"/>
            <span v-else class="no-image">暂无图片</span>
          </td>
          <td id="profile">
            <table id="Infotable">
              <tbody>
              <tr>
                <td colspan="2" class="info-left">{{ teacher.name }}</td>
              </tr>
              <tr>
                <td class="info-left">所在系</td>
                <td class="info-right">{{ teacher.department }}</td>
              </tr>
              <tr>
                <td class="info-left">研究方向</td>
                <el-tooltip placement="bottom" effect="light" :content="teacher.research_direction" :visible-arrow="false"
                            :open-delay="1000">
                <td class="info-right">{{ truncatedTitle(teacher.research_direction) }}</td>
                </el-tooltip>
              </tr>
              <tr>
                <td class="info-left">办公室</td>
                <td class="info-right">{{ teacher.office }}</td>
              </tr>
              <tr>
                <td class="info-left">办公电话</td>
                <td class="info-right">{{ teacher.phone }}</td>
              </tr>
              <tr>
                <td class="info-left">电子邮件</td>
                <td class="info-right">{{ teacher.email }}</td>
              </tr>
              <tr>
                <td class="info-left">个人主页</td>
                <td class="info-right">
                  <a :href="teacher.personal_page" target="_blank">{{
                      teacher.personal_page
                    }}</a>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
    </tr>
    <div class="personal_profile_content">

      <el-tabs v-model="activeName"  stretch type="card">
        <el-tab-pane label="个人简介" name="first"  v-html="teacher.personal_profile"></el-tab-pane>
        <el-tab-pane label="教育经历" name="second" v-html="teacher.education_experience"></el-tab-pane>
        <el-tab-pane label="工作经历" name="third" v-html="teacher.work_experience"></el-tab-pane>
        <el-tab-pane label="科研成果" name="fourth" v-html="teacher.scientific_payoffs"></el-tab-pane>
        <el-tab-pane label="教学成果" name="fifth" v-html="teacher.teaching_result"></el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import service from '@/utils/service';

export default {
  props: ["id"],
  data() {
    return {
      teacher: "",
      activeName:'first'
    };
  },
  computed:{
    // currentJumpPath(){
    //   const parts = this.$route.path.split('/');
    //   const path = '/'+parts[1]+'/'+'login';
    //   console.log(path);
    //   return path;
    // }

  },
  methods: {
    //根据教师id获取教师信息
    async getTeacherById(id) {
      try {
        const apiUrl =
          "/teachers/info";
        const response = await service.get(apiUrl, {
          params: {
            teacher_id: id,
          },
        });
        if (response.data.code === 20041) {
          this.teacher = response.data.data;
        }
      } catch (error) {
        console("api请求出错", error);
      }
    },
    //截断
    truncatedTitle(title) {
      // 检查 title 是否为空
      if (!title) {
        console.error('truncatedTitle function expects a non-empty string.');
        return ''; // 返回一个默认值或空字符串
      }

      const maxLength = 20;
      if (title.length > maxLength) {
        return title.slice(0, maxLength) + "...";
      }
      return title;
    }
  },
  created() {
    this.getTeacherById(this.id);
  },
};
</script>
<style scoped>
.main {
  width: 1130px;
}

table {
  width: 100%; /* 使表格占满其父容器的宽度 */
  table-layout: fixed; /* 固定表格的布局 */
  border-collapse: collapse; /* 去除表格的边框 */
}

/* 设置表格中的单元格样式 */
td {
  /* border: 1px solid #ccc; 添加单元格之间的边框 */

  padding: 9px 5px; /* 设置单元格内边距，使内容与边框之间有一定距离 */
}

#title {
  text-align: center;
}

.dashed-bottom {
  border-bottom: 1px dashed #000; /* 使用虚线边框，颜色为黑色(#000) */
}

#manage {
  text-align: right;
}

.profile-image {
  width: 270px;
  height: 290px;
  border: 1px solid #ccc;

}

.info-left {
  text-align: center;
  width: 40%;
  height: 20px;
  background-color: #dce5ed;
}

.image {
  width: 100%; /* 图片宽度占据整个容器宽度 */
  height: 100%; /* 图片高度占据整个容器高度 */
  object-fit: cover; /* 等比例缩放图片，保持图片比例并填充满整个容器 */
}

#profile {
  background-color: #CCCCCC;
}

#Infotable {
  border: 1px solid #ccc;
  border-collapse: separate;
  border-spacing: 1px;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

.info-right {
  width: 60%;
  height: 20px;
  text-indent: 2em;
  background-color: #f2f2f2;
}

.personal_profile {
  text-align: center;
  background-color: #2b547e;
  color: #f2f2f2;
  overflow: auto;
}

a {
  text-decoration: none;
}

.personal_profile_content{
  height: 55%;
  overflow: auto;
}

.no-image{
  margin-left: 90px;
}

::v-deep .el-tabs--card .el-tabs__header{
  background-color: #1c6ca1;

}


.personal_profile_content ::v-deep .el-tabs__item.is-active{
  background-color: #4D4D4D;
}



::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
  color: white;
}




</style>

